<template>
  <div class="content">
    <div id="printWrap" ref="printWrap" class="print_wrap" style="font-size: 12px">
      <div>{{ $t("message.ddbh") }}：{{ obj.orderId }}</div>
      <div>{{ $t("message.zfrq") }}：{{ obj.payTime }}</div>
      <div style="margin-top: 10px; display: flex">
        <div
          v-for="i in 30"
          :key="i"
          style="border-bottom: 1px solid; flex: 1; margin: 0 2px 10px"
        />
      </div>
      <div style="display: flex; margin-bottom: 4px">
        <span style="width: 200px">{{ $t("message.spmc") }}</span>
        <span style="width: 60px">{{ $t("message.dprice") }}</span>
        <span style="width: 60px">{{ $t("message.num") }}</span>
        <span style="width: 60px">{{ $t("message.jine") }}</span>
      </div>
      <template v-for="good,i in obj.goodsList">
        <div
          :key="'xx' + i"
          style="display: flex; margin-bottom: 4px"
        >
          <span style="width: 200px">{{ good.name }}</span>
          <span style="width: 60px">{{ good.price }}</span>
          <span style="width: 60px">{{ good.num }}</span>
          <span style="width: 60px">{{ good.totalPrice }}</span>
        </div>
        <br v-if="good.name.length > 11" :key="'xb' + i">
        <!-- <br v-if="good.name.length > 22" :key="'xb' + i">
        <br v-if="good.name.length > 33" :key="'xc' + i"> -->
      </template>
      <div style="margin-top: 10px; display: flex">
        <div
          v-for="i in 30"
          :key="i"
          style="border-bottom: 1px solid; flex: 1; margin: 0 2px 10px"
        />
      </div>
      <div style="display: flex; margin-bottom: 4px">
        <div style="width: 160px;">
          {{ $t("message.yfk2") }}：{{ obj.money }}
        </div>
        <div style="flex: 1">{{ $t("message.num") }}：{{ obj.num }}</div>
      </div>
      <div style="display: flex; margin-bottom: 4px">
        <div style="width: 160px">
          {{ $t("message.sfk") }}：{{ obj.realMoney }}
        </div>
        <div style="flex: 1">{{ $t("message.zl") }}：{{ obj.zeroMoney }}</div>
      </div>
      <div v-if="obj.payMethod" style="margin-bottom: 4px">
        {{ $t("message.fkfs") }}：{{ obj.payMethod }}
      </div>
      <div style="margin-top: 10px; display: flex">
        <div
          v-for="i in 30"
          :key="i"
          style="border-bottom: 1px solid; flex: 1; margin: 0 2px 10px"
        />
      </div>
      <template v-if="obj.useKeyOne">
        <div style="margin-bottom: 4px">
          <strong>{{ $t("message.rcxx") }}</strong>
        </div>
        <div style="margin-bottom: -10px">
          {{ $t("message.sycg") }}：{{ obj.useKeyOne }}
        </div>
        <br v-if="nr($t('message.sycg') + '：' + obj.useKeyOne) > 44">
        <br v-if="nr($t('message.sycg') + '：' + obj.useKeyOne) > 88">
        <br>
        <div style="margin-bottom: -10px;word-break: break-all;text-align: justify;text-justify: auto;">
          {{ $t("message.sysj2") }}：{{ obj.useKeyTwo }}
        </div>
        <br>
        <br v-if="nr($t('message.sysj2') + '：' + obj.useKeyTwo) > 44">
        <br v-if="nr($t('message.sysj2') + '：' + obj.useKeyTwo) > 88">
        <div style="margin-bottom: -10px;word-break: break-all;text-align: justify;text-justify: auto;">
          {{ $t("message.syxm") }}：{{ obj.useKeyThree }}
        </div>
        <br>
        <br v-if="nr($t('message.syxm') + '：' + obj.useKeyThree) > 44">
        <br v-if="nr($t('message.syxm') + '：' + obj.useKeyThree) > 88">
        <br v-if="nr($t('message.syxm') + '：' + obj.useKeyThree) > 132">
        <br v-if="nr($t('message.syxm') + '：' + obj.useKeyThree) > 176">
        <br>
        <div style="margin-top: 10px; display: flex">
          <div
            v-for="i in 30"
            :key="i"
            style="border-bottom: 1px solid; flex: 1; margin: 0 2px 10px"
          />
        </div>
        <div v-if="obj.erCode" style="text-align: center; margin: 20px 0 10px">
          <vue-qr :text="obj.erCode" :margin="0" :logo-scale="0.3" :size="120" />
        </div>
        <br>
      </template>
      <div style="margin-top: 10px; text-align: center">
        {{ $t("message.jrxksm") }}
      </div>
      <div style="width: 100%; margin-top: 24px; text-align: center">·</div>
    </div>
  </div>
</template>

<script>
import print from 'print-js'
import vueQr from 'vue-qr'
export default {
  // 场地、门票、约球
  components: {
    vueQr
  },
  data() {
    return {
      obj: {
        erCode: ''
      }
    }
  },
  methods: {
    print() {
      const obj = { ...this.obj }
      console.log('obj1', obj)
      const name = obj.venueName || obj.useKeyOne
      print({
        printable: 'printWrap',
        type: 'html',
        header: this.$t('message.hyjr') + name,
        headerStyle:
          'font-weight: 500;font-size: 24px;line-height: 26px;margin-bottom: 30px;text-align: center;',
        maxWidth: 300,
        font_size: '10pt',
        targetStyles: ['*']
      })
    },
    nr(cnt) {
      return cnt.length
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  position: fixed;
  left: -1000px;
  bottom: -1000px;
  width: 300px;
}
</style>
